<template>
	<!-- 搜索栏 -->
	<view class='search-box'>
		<my-search @search='gotosearch'></my-search>
	</view>
	<!-- 轮播图 -->
	<view>
		<swiper class="banner" autoplay="true" indicator-dots="true" interval="2000" duration="500" circular="true">
			<swiper-item v-for="(item,i) in picc" :key="i">
				<!-- <navigator> -->
				<image class="banner-image" :src="item" mode="widthFix"></image>
				<!-- </navigator> -->
			</swiper-item>
		</swiper>
	</view>
	<!-- tab切换列表 -->
	<view>
		<u-subsection :list="list" mode="button" :current="type" @change="toggleActive"></u-subsection>
	</view>

	<!-- 列表 -->
	<block v-for="(item,i) in datalist" :key="i">
		<my-lose-list :losedata="item" :handle='false'></my-lose-list>
	</block>
	<view class="noList">
		<!-- 没有信息的 -->
		<text class="noList-text" v-if="listLength > 0">没有更多了呢</text>
		<!-- 有信息的 -->
		<text class="noList-text" v-else>还没有信息呢</text>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		http
	} from '../../API/request.js';
	import {
		formatTime
	} from '../../utils/index.js';
	// 轮播图图片数据
	const picc = ref(['/static/pic/banner1.png', '/static/pic/banner2.png', '/static/pic/banner3.png'])
	const type = ref(0)
	const list = ref(['寻主', '寻物'])
	// 失物列表数据
	const listLength = ref(0)
	const datalist = ref([])
	// 点击事件
	const gotosearch = () => {
		uni.navigateTo({
			url: '/subpkg/search/search'
		})
	}

	// 判断所点的按钮切换样式
	const toggleActive = (index) => {
		if (index === 0) {
			type.value = index
			http.get('/getLose', {
				params: {
					type: type.value
				}
			}).then((res) => {
				const {
					data
				} = res
				datalist.value = data.map(item => {
					return {
						...item,
						time: formatTime(item.time)
					}
				})
				listLength.value = 0
				listLength.value = datalist.value.length
			})
		} else if (index === 1) {
			type.value = index
			http.get('/getLose', {
				params: {
					type: type.value
				}
			}).then((res) => {
				const {
					data
				} = res
				datalist.value = data.map(item => {
					return {
						...item,
						time: formatTime(item.time)
					}
				})
				listLength.value = 0
				listLength.value = datalist.value.length
			})
		}
	}

	onLoad((options) => {
		const openid = uni.getStorageSync('openid')
		if (!openid) {
			uni.login({
				success: function(res) {
					if (res.code) {
						http.get('/login', {
							params: {
								code: res.code
							}
						}).then((res) => {
							const {
								data
							} = res
							if (data !== "error") {
								uni.setStorageSync('openid', data)
							}
						})
					} else {}
				}
			});
		}

		uni.startPullDownRefresh()
		// 设置 scrollTop 为 0 来滚动到顶部
		uni.pageScrollTo({
			scrollTop: 0, // 设置滚动到顶部
			duration: 300 // 动画时长，单位毫秒
		})
		http.get('/getLose', {
			params: {
				type: type.value
			}
		}).then((res) => {
			const {
				data
			} = res
			datalist.value = data.map(item => {
				return {
					...item,
					time: formatTime(item.time)
				}
			})
			listLength.value = datalist.value.length
		})
	})
	onShow(() => {
		http.get('/getLose', {
			params: {
				type: type.value
			}
		}).then((res) => {
			const {
				data
			} = res
			datalist.value = data.map(item => {
				return {
					...item,
					time: formatTime(item.time)
				}
			})
			listLength.value = 0
			listLength.value = datalist.value.length
		})
	})
	// 下拉刷新重新获取数据
	onPullDownRefresh(() => {
		datalist.value = []
		http.get('/getLose', {
			params: {
				type: type.value
			}
		}).then((res) => {
			const {
				data
			} = res

			datalist.value = data.map(item => {
				return {
					...item,
					time: formatTime(item.time)
				}
			})
			listLength.value = 0
			listLength.value = datalist.value.length
		})
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	})
</script>

<style lang="less">
	.search-box {
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.noList {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.noList-text {
			color: rgba(126, 126, 126, 0.7);
			font-size: 15px;
		}
	}

	.banner {
		height: 350rpx;

		.banner-image {
			height: 350rpx;
			width: 100%;
		}
	}
</style>